import styles from "../../index.module.less";
import { map } from "lodash";
import { useState } from "react";
import cs from "classnames";
import { getTotalSta } from "@/api/modules/report";
import { useRequest } from "ahooks";

const CARD_LIST = [
	{
		name: "今日任务数",
		value: 0,
		icon: "task",
		key: "todayTasks"
	},
	{
		name: "今日环线执行数",
		value: 0,
		icon: "line",
		key: "todayExecutions"
	},
	{
		name: "今日行驶总里程",
		value: "0km",
		icon: "car",
		key: "todayMileage"
	},
	{
		name: "今日预警总数",
		value: 0,
		icon: "alert",
		key: "alertCount"
	}
];

export default () => {
	const { data: totalData } = useRequest(() => getTotalSta({}));
	const total = totalData?.data;
	const [cardList] = useState(CARD_LIST);

	return (
		<div className={styles.midModule}>
			{map(cardList, (item: any, index: number) => {
				return (
					<div className={styles.cardItem} key={index}>
						<div className={cs(styles.icon, styles[item.icon])}></div>
						<div className={styles.info}>
							<div className={styles.label}>{item.name}</div>
							<div className={styles.value}>
								{item.key === "todayMileage"
									? total?.[item.key]
										? Number(total[item.key]) % 1 === 0
											? Number(total[item.key]).toString()
											: Number(total[item.key])
													.toFixed(2)
													.replace(/\.?0+$/, "")
										: "0"
									: total?.[item.key] || 0}
							</div>
						</div>
					</div>
				);
			})}
		</div>
	);
};
